<template>
  <div class="graph-relation2" :style="style">
    <div class="u-bac" :style="{ backgroundColor }"></div>
    <div class="u-graph" ref="graphRef"></div>
    <NodeTooltip
      :visible="visible"
      :data="data"
      :position="position"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    ></NodeTooltip>
    <Toolbar
      @clickZoomIn="clickZoomIn"
      @clickZoomOut="clickZoomOut"
      @changeFullScreen="changeFullScreen"
      class="u-toolbar"
      v-if="showToolbar"
    ></Toolbar>
  </div>
</template>

<script setup name="GraphRelation2">
import { onMounted, ref, inject, useAttrs, nextTick } from 'vue'
import Toolbar from './toolbar.vue'
import useResize from '../../../utils/resize'
import graphInit from '../../../shared/graph-relation2/graphInit'
import NodeTooltip from './nodeTooltip.vue'
import useNodeTooltip from './useNodeTooltip'

const props = defineProps({
  data: Object,
  limitLen: {
    type: Number,
    default: 6,
  },
  nodeVGap: {
    type: Number,
    default: 30,
  },
  nodeHGap: {
    type: Number,
    default: 30,
  },
  nodeWidth: {
    type: Number,
    default: 200,
  },
  defaultZoom: {
    type: Number,
    default: 0.7,
  },
  minZoom: {
    type: Number,
    default: 0.3,
  },
  maxZoom: {
    type: Number,
    default: 2,
  },
  mouseZoomable: {
    type: Boolean,
    default: true,
  },
  showToolbar: Boolean,
  waterMarker: Object,
  backgroundColor: {
    type: String,
  },
})

const emit = defineEmits(['clickNode', 'clickToolbar'])

const attrs = useAttrs()

const graphRef = ref()
let graph = null
const style = ref(attrs.style)

const { visible, data, position, show, hide, mouseenter, mouseleave } =
  useNodeTooltip()

onMounted(() => {
  graph = graphInit({
    graphRef,
    data: props.data,
    defaultZoom: props.defaultZoom,
    minZoom: props.minZoom,
    maxZoom: props.maxZoom,
    mouseZoomable: props.mouseZoomable,
    limitLen: props.limitLen,
    nodeVGap: props.nodeVGap,
    nodeHGap: props.nodeHGap,
    nodeWidth: props.nodeWidth,
    waterMarker: props.waterMarker,
    showTooltip(e) {
      const { type } = e.item.getModel()
      type === 'entity-node' && show(e)
    },
    hideTooltip(e) {
      const { type } = e.item.getModel()
      type === 'entity-node' && hide(e)
    },
    clickNode(e) {
      emit('clickNode', e.item.getModel())
    },
  })
})

useResize(() => graph.myResize())

function clickZoomIn() {
  graph.zoomTo(graph.getZoom() - 0.1, null, true)
  emit('clickToolbar', 'zoomIn')
}
function clickZoomOut() {
  graph.zoomTo(graph.getZoom() + 0.1, null, true)
  emit('clickToolbar', 'zoomOut')
}

function changeFullScreen(d) {
  if (d === 'fullScreen') {
    style.value = {
      position: 'fixed',
      left: 0,
      top: 0,
      zIndex: 1000,
      width: '100vw',
      height: '100vh',
    }
    graph.changeSize(window.innerWidth, window.innerHeight)
    graph.myInit()

    emit('clickToolbar', 'fullScreen')
  } else {
    style.value = attrs.style
    nextTick(() => {
      graph.changeSize(graphRef.value.clientWidth, graphRef.value.clientHeight)
      graph.myInit()
    })

    emit('clickToolbar', 'normalScreen')
  }
}

defineExpose({
  getGraphInstance() {
    return graph
  },
})
</script>

<script>
export default {
  inheritAttrs: false,
}
</script>

<style lang="stylus" scoped>
.graph-relation2
  position relative
  .u-bac
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    z-index -1
  .u-graph
    position relative
    width 100%
    height 100%
    z-index 1
  .u-toolbar
    position absolute
    right 16px
    bottom 19px
    z-index 2
  // // 重置g6 tooltip的背景色，默认背景色有透明度
  // :deep(.g6-component-tooltip)
</style>
